<template>
  <div>
    <el-dialog
      v-model="detailsVisible"
      title="查看"
      width="30%"
      append-to-body
      destroy-on-close
    >
      <div class="fileth">
        <span>序号</span>
        <span>附件名称</span>
        <span>操作</span>
      </div>
      <div v-if="props.fileData.length">
        <div v-for="(i, index) in props.fileData" :key="i.url" class="fileItem">
          <span>{{ index + 1 }}</span>
          <el-tooltip
            v-if="i.name && i.name.length > 20"
            class="box-item"
            effect="dark"
            :content="i.name"
            placement="top"
          >
            <MA @click="preview(i)">{{ i.name.slice(0, 20) + '...' }}</MA>
          </el-tooltip>
          <MA v-else @click="preview(i)">{{ i.name }}</MA>
          <MA @click="downLoad(i)">下载</MA>
        </div>
      </div>
      <div v-else class="emptyHint">暂无附件</div>

      <el-dialog
        v-model="previewVisible"
        title="预览附件"
        width="50%"
        destroy-on-close
      >
        <div class="dialogBody">
          <div class="content">
            <img
              :src="fileUrl"
              v-if="['png', 'jpg', 'jpeg'].includes(fileType)"
            />
            <vue-office-docx :src="fileUrl" v-else-if="fileType === 'docx'" />
            <vue-office-excel
              :src="fileUrl"
              style="width: 100%; height: 70vh"
              v-else-if="fileType === 'xlsx'"
            />
            <vue-office-pdf :src="fileUrl" v-else-if="fileType === 'pdf'" />
            <MA v-else @click="downLoad(fileObj)">{{ fileObj.name }}</MA>
          </div>
        </div>
      </el-dialog>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import VueOfficeDocx from '@vue-office/docx'
import '@vue-office/docx/lib/index.css'
import VueOfficeExcel from '@vue-office/excel'
import '@vue-office/excel/lib/index.css'
import VueOfficePdf from '@vue-office/pdf'
import { fileListProps } from './fileList'
import { BasicRequest } from '@/service/basicRequest'

defineOptions({
  name: 'MFileList',
  inheritAttrs: false
})

const detailsVisible = ref(false)
const previewVisible = ref(false)

const props = defineProps(fileListProps)

const service = new BasicRequest({})

const imgReg = /\.(png|jpe?g|gif|svg)(\?.*)?$/
// 文件下载
function downLoad(file: any) {
  if (imgReg.test(file.url)) {
    const a = document.createElement('a')
    const herf = file.url
    a.href = herf
    a.download = file.name
    document.body.appendChild(a)
    a.click()
    document.body.removeChild(a)
  } else {
    service
      .request({ url: file.url, method: 'GET', responseType: 'blob' })
      .then((res: any) => {
        const blob = new Blob([res], {
          type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
        })
        const a = document.createElement('a')
        const URL = window.URL || window.webkitURL
        const herf = URL.createObjectURL(blob)
        a.href = herf
        a.download = file.name
        document.body.appendChild(a)
        a.click()
        document.body.removeChild(a)
        window.URL.revokeObjectURL(herf)
      })
  }
}

const fileUrl = ref('')
const fileType = ref('')
const fileObj = ref({
  name: '',
  url: ''
})
// 预览
function preview(file: any) {
  if (!file.url) return
  fileUrl.value = file.url
  fileType.value = (file.url || file.name).split('.').pop()
  fileObj.value = file

  previewVisible.value = true
}

defineExpose({
  detailsVisible,
  show: () => {
    detailsVisible.value = true
  }
})
</script>

<style lang="scss" scoped>
.emptyHint {
  text-align: center;
  color: #ccc;
  padding: 20px;
}
.el-dropdown {
  line-height: normal;
}
.fileth {
  display: flex;
  justify-content: space-between;
  font-weight: bold;
  border: 1px solid #ccc;
  background: #fafafa;
  padding: 20px;
  color: #262626;
}
.fileItem {
  display: flex;
  justify-content: space-between;

  padding: 20px;
  border-bottom: 1px solid #ccc;
}
.dialogBody {
  width: 100%;
  height: 70vh;
  position: relative;
  overflow: hidden;
  overflow: auto;
  .content {
    width: 100%;
    // position: absolute;
    // top: 50%;
    // left: 50%;
    // transform: translate(-50%, -50%);
  }
}
</style>
